<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>训练记录</title>
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
        <script src="../script/jquery.js"></script>
        <script src="../CommonTool/commonNetWork.js"></script>
    </head>
    <style>
        progress {
            margin-left: 5%;
            position: relative;
            height: 24px;
            width: 85%;
            border: 1px solid #fff;
        }
        /* progress::before {
    content: "Loading: " attr(value) "%";
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: blue;
 } */
        progress::-webkit-progress-bar {
            background-color: orange;
        }
        progress::-webkit-progress-value {
            background-color: green;
        }
        .progress-textOne {
            position: absolute;
            left: 15%;
            top: 75%;
            transform: translate(-0%, -50%);
            color: #000;
            font-size: 14px;
        }
        .progress-textTwo {
            position: absolute;
            left: 50%;
            top: 75%;
            transform: translate(-0%, -50%);
            color: rgb(161, 159, 159);
            font-size: 14px;
        }
        .ThreeColumnsOne {
            width: 29%;
            float: left;
            text-align: left;
            font-size: 0.75rem;
        }
        .ThreeColumnsTwo {
            width: 23%;
            float: left;
            font-size: 0.75rem;
        }
        .ThreeColumnsThree {
            width: 20%;
            float: left;
            text-align: center;
            font-size: 0.75rem;
        }
        .ThreeColumnsFour {
            width: 28%;
            float: right;
            text-align: center;
            font-size: 0.75rem;
        }
        .RowColumns {
            height: 60px;
            line-height: 60px;
            padding-left: 3%;
            border-bottom: solid 1px rgb(212, 211, 211);
        }
        .RowColumnsIng {
            height: 60px;
            line-height: 60px;
            padding-left: 3%;
            background-color: rgb(220, 238, 215);
            border-bottom: solid 1px rgb(212, 211, 211);
        }
    </style>

    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <div class="aui-pull-left aui-btn" onclick="close_win();">
                <span class="aui-iconfont aui-icon-left"></span>返回
            </div>
            <div class="aui-title" style="left: 2rem; right: 2rem">
                <span id="MenuName"></span>
                训练记录
            </div>
            <div class="aui-pull-right">
                <i class="aui-iconfont aui-icon-my" onclick="UserCenter()"></i>
            </div>
        </header>
        <div class="aui-grid" style="background: none">
            <div class="aui-row">
                <div class="aui-col-xs-4">
                    <h2>初级训练</h2>

                    <div>
                        <span id="BasicProgressOne">0</span>/<span
                            id="BasicProgressTwo"
                            >0</span
                        >
                    </div>
                    <progress
                        id="BasicProgress"
                        value="30"
                        max="100"
                    ></progress>
                    <span class="progress-textOne">已完成</span>
                    <span class="progress-textTwo">未完成</span>
                </div>
                <div class="aui-col-xs-4">
                    <h2>中级训练</h2>
                    <div>
                        <span id="MiddleProgressOne">0</span>/<span
                            id="MiddleProgressTwo"
                            >0</span
                        >
                    </div>
                    <progress
                        id="MiddleProgress"
                        value="30"
                        max="100"
                    ></progress>
                    <span class="progress-textOne">已完成</span>
                    <span class="progress-textTwo">未完成</span>
                </div>
                <div class="aui-col-xs-4">
                    <h2>高级训练</h2>
                    <div>
                        <span id="AdvancedProgressOne">0</span>/<span
                            id="AdvancedProgressTwo"
                            >0</span
                        >
                    </div>
                    <progress
                        id="AdvancedProgress"
                        value="30"
                        max="100"
                    ></progress>
                    <span class="progress-textOne">已完成</span>
                    <span class="progress-textTwo">未完成</span>
                </div>
            </div>
            <div class="aui-row">
                <ul id="RecordHtml">
                    <!-- <li class="RowColumns">
                        <div class="ThreeColumnsOne">1.基础初级-身份认知</div>
                        <div class="ThreeColumnsTwo">全部完成：10/10关</div>
                        <div class="ThreeColumnsThree">通过率：30%</div>
                        <div class="ThreeColumnsFour">2024-7-15 12:56:30</div>
                    </li>
                    <li class="RowColumnsIng" onclick="JumpProgress()">
                        <div class="ThreeColumnsOne">2.基础初级-表情识别</div>
                        <div class="ThreeColumnsTwo">进行中</div>
                        <div class="ThreeColumnsThree">通过率：20%</div>
                        <div class="ThreeColumnsFour">2024-7-15 12:56:30</div>
                    </li> -->
                </ul>
            </div>
        </div>
    </body>
</html>
<script>
    var token = "";
    var userid = "";
    var groupId = "";
    apiready = function () {
        token = api.pageParam.token;
        userid = api.pageParam.uid;
        var currentTimestamp = Date.now();
        recordCount();
        recordList();
    };
    //训练记录的总数
    function recordCount() {
        $.ajax({
            url:
                CommonUrl + "/PregressRecord/queryUserClassCount?uid=" + userid,
            method: "get",
            dataType: "json",
            contentType: "application/json",
            headers: {
                Authorization: `Bearer ${token}`,
            },
            success: function (data) {
                let response = JSON.parse(JSON.stringify(data));
                document.getElementById("BasicProgress").max =
                    response.allElementaryCount;
                document.getElementById("BasicProgress").value =
                    response.userElementaryClassCount;
                document.getElementById("MiddleProgress").max =
                    data.allIntermediateCount;
                document.getElementById("MiddleProgress").value =
                    data.userIntermediateClassCount;
                document.getElementById("AdvancedProgress").max =
                    data.allAdvancedCount;
                document.getElementById("AdvancedProgress").value =
                    data.userAdvancedClassCount;
                document.getElementById("BasicProgressOne").textContent =
                    data.userElementaryClassCount;
                document.getElementById("BasicProgressTwo").textContent =
                    data.allElementaryCount;
                document.getElementById("MiddleProgressOne").textContent =
                    data.userIntermediateClassCount;
                document.getElementById("MiddleProgressTwo").textContent =
                    data.allIntermediateCount;
                document.getElementById("AdvancedProgressOne").textContent =
                    data.userAdvancedClassCount;
                document.getElementById("AdvancedProgressTwo").textContent =
                    data.allAdvancedCount;
            },
            error: function (error) {
                alert(JSON.stringify(error));
            },
        });
    }
    function recordList() {
        $.ajax({
            url:
                CommonUrl +
                "/PregressRecord/queryUserClassCountDetail?uid=" +
                userid,
            method: "get",
            dataType: "json",
            contentType: "application/json",
            headers: {
                Authorization: `Bearer ${token}`,
            },
            success: function (data) {
                var res = JSON.parse(JSON.stringify(data));
                // let stringifiedData = JSON.stringify(data);
                // alert(stringifiedData)
                // let parsedData = JSON.parse(stringifiedData);
                // alert(parsedData);
                var str = "";
                res.forEach(function (context, index) {
                    if (context.status === "end") {
                        str +=
                            "<li class='RowColumns'>" +
                            '<div class="ThreeColumnsOne">' +
                            Number(index + 1) +
                            "." +
                            context.scene +
                            context.sceneLevel +
                            "-" +
                            context.courseType +
                            "</div>" +
                            '<div class="ThreeColumnsTwo">' +
                            "已完成" +
                            ":" +
                            context.nums +
                            "/" +
                            context.allClass +
                            "</div>" +
                            '<div class="ThreeColumnsThree">' +
                            "通过率" +
                            ":" +
                            context.percent +
                            "</div>" +
                            '<div class="ThreeColumnsFour">' +
                            context.timestamp +
                            "</div>" +
                            "</li>";
                    } else if (context.status === "ing") {
                        if (context.courseType == "视线训练") {
                            str +=
                                "<li class='RowColumnsIng'  onclick=\"JumpProgress('" +
                                context.sceneLevel +
                                "', '" +
                                context.courseType +
                                "', '" +
                                context.nums +
                                "', '" +
                                context.groupId +
                                "')\">" +
                                '<div class="ThreeColumnsOne">' +
                                Number(index + 1) +
                                "." +
                                context.scene +
                                context.sceneLevel +
                                "-" +
                                context.courseType +
                                "</div>" +
                                '<div class="ThreeColumnsTwo">' +
                                "进行中" +
                                ":" +
                                context.nums +
                                "/" +
                                context.allClass +
                                "</div>" +
                                '<div class="ThreeColumnsFour">' +
                                context.timestamp +
                                "</div>" +
                                "</li>";
                        } else {
                            str +=
                                "<li class='RowColumnsIng'  onclick=\"JumpProgress('" +
                                context.sceneLevel +
                                "', '" +
                                context.courseType +
                                "', '" +
                                context.nums +
                                "', '" +
                                context.groupId +
                                "')\">" +
                                '<div class="ThreeColumnsOne">' +
                                Number(index + 1) +
                                "." +
                                context.scene +
                                context.sceneLevel +
                                "-" +
                                context.courseType +
                                "</div>" +
                                '<div class="ThreeColumnsTwo">' +
                                "进行中" +
                                ":" +
                                context.nums +
                                "/" +
                                context.allClass +
                                "</div>" +
                                '<div class="ThreeColumnsThree">' +
                                "通过率" +
                                ":" +
                                context.percent +
                                "</div>" +
                                '<div class="ThreeColumnsFour">' +
                                context.timestamp +
                                "</div>" +
                                "</li>";
                        }
                    }
                });
                $("#RecordHtml").html(str);
            },
            error: function (error) {
                alert(JSON.stringify(error));
            },
        });
    }
    function close_win() {
        api.openWin({
            name: "MainMenu",
            url: "./MainMenu.html",
            pageParam: {
                uid: userid,
                token: token,
            },
        });
    }
    function JumpProgress(sceneLevel, courseType, nums, groupId) {
        $.ajax({
            url: CommonUrl + "/PregressRecord/queryHtmlType",
            method: "post",
            dataType: "json",
            data: JSON.stringify({
                sceneLevel: sceneLevel,
                courseType: courseType,
                sort: 1,
                groupId: "",
            }),
            contentType: "application/json",
            headers: {
                Authorization: `Bearer ${token}`,
            },
            success: function (data) {
                api.openWin({
                    name: "ing",
                    url:
                        "./" +
                        JSON.parse(JSON.stringify(data.data.sceneHtml)) +
                        "/" +
                        JSON.parse(JSON.stringify(data.data.courseHtml)) +
                        "/" +
                        JSON.parse(JSON.stringify(data.data.sortHtml)) +
                        ".html",
                    pageParam: {
                        uid: userid,
                        token: token,
                        groupId: groupId,
                    },
                });
            },
            error: function (error) {
                alert(JSON.parse(JSON.stringify(error.data)));
            },
        });
    }
</script>
<!-- 得分逻辑： 当进来时为ing   当做题为ing   当点击通过为ing  right   当离开时用end -->
